getChanList()
/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */
const form = document.querySelector(".sel-form")
let total,pageNum,pag,pagetotal
async function getArt(status,channel_id,page,per_page){
    const queryobj = {
        status : status?status:'',
        channel_id : channel_id?channel_id:'',
        page : page?page:1,
        per_page : per_page?per_page:3
    }
    const {data:{data:res}} = await axios({
        url: '/v1_0/mp/articles',
        params : queryobj
    })
    document.querySelector('.art-list').innerHTML = 
    res.results.map(item=>{
        return `<tr>
            <td>
            <img
                src="${item.cover.images[0]}"
                alt="">
            </td>
            <td>${item.title}</td>
            <td>
            ${
                item.status===2?'<span class="badge text-bg-success">审核通过</span>':'<span class="badge text-bg-primary">待审核</span>'
            }
            </td>
            <td>
            <span>${item.pubdate}</span>
            </td>
            <td>
            <span>${item.read_count}</span>
            </td>
            <td>
            <span>${item.comment_count}</span>
            </td>
            <td>
            <span>${item.like_count}</span>
            </td>
            <td>
            <i class="bi bi-pencil-square edit" data-id="${item.id}"></i>
            <i class="bi bi-trash3 del" data-id="${item.id}"></i>
            </td>
        </tr>`
    }).join('')
    total = res.total_count
    pageNum = res.per_page
    pag = res.page
    document.querySelector('.total-count').innerHTML =`共${res.total_count}条/${total%pageNum==0?total/pageNum:parseInt(total/pageNum+1)}页` 
}

getArt()
/**
 * 目标2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 */
const sel = document.querySelector('.sel-btn')
sel.addEventListener('click',e=>{
    const data = serialize(form,{hash:true,empty:true})
    getArt(data.status,data.channel_id)
})
/**
 * 目标3：分页功能
 *  3.1 保存并设置文章总条数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */
document.querySelector('.last').addEventListener('click',e=>{
    const data = serialize(form,{hash:true,empty:true})
    if(pag>1){
        pag--
        getArt(data.status,data.channel_id,pag)
        document.querySelector('.page-now').innerHTML = `第${pag}页`
    }
})
document.querySelector('.next').addEventListener('click',e=>{
    const data = serialize(form,{hash:true,empty:true})
    pagetotal = total%pageNum==0?total/pageNum:parseInt(total/pageNum+1)
    if(pag < pagetotal){
        pag++
        getArt(data.status,data.channel_id,pag)
        document.querySelector('.page-now').innerHTML = `第${pag}页`
    }
})
/**
 * 目标4：删除功能
 *  4.1 关联文章 id 到删除图标
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 重新获取文章列表，并覆盖展示
 *  4.5 删除最后一页的最后一条，需要自动向前翻页
 */
const tbody = document.querySelector('.art-list')
tbody.addEventListener('click',e=>{
    pagetotal = total%pageNum==0?total/pageNum:parseInt(total/pageNum+1)
    if(e.target.classList.contains('del')){
        const id = e.target.dataset.id
        axios({
            url : `v1_0/mp/articles/${id}`,
            method : 'DELETE'
        }).then(({data:res})=>{
            alert("删除成功")
            const data = serialize(form,{hash:true,empty:true})
            if(pag>1 && pag>=pagetotal){
                pag--
                getArt(data.status,data.channel_id,pag)
                document.querySelector('.page-now').innerHTML = `第${pag}页`
            }
        })
    }
},true)
// 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去
tbody.addEventListener('click',e=>{
    if(e.target.classList.contains('edit')){
        const id = e.target.dataset.id
        location.href = `../publish/index.html?id=${id}`
    }
},true)
//获取用户昵称通过本地Token


getNickName()